<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>评论</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
    <style>
        body {
            background: #F5F5F5;

        }
        .zhuti{
            padding-left:0.75rem;
            padding-right:0.75rem;
            background:#FFFFFF;

        }
        .advice{
            background:#FFFFFF;
            color:#999999;
            height:4.15rem;
            padding:0.725rem 0.15rem 0;
            font-size:0.7rem;
            overflow-y: auto;
            word-break: break-all;
            word-wrap:break-word;
            background-color:#FFFFFF;
        }
        textarea::-webkit-input-placeholder {
            color: #999999;
        }
        .shuzi{
            font-size:0.6rem;
            color:#999999;
            text-align: right;
            padding-right:0.475rem;
        }
        .photoAll{
            width:100%;
            padding-top:1.1rem;
            background: white;
        }
        .photo {
            width: 30%;
            height: 100px;
            display: inline-block;
            position: relative;
            margin-bottom: 20px;

        }
        .photo:nth-child(3n+1) {
            margin-right: 2.45%;
            margin-left: 2.45%;
        }
        .photo:nth-child(3n+2) {
            margin-right: 2.45%;
        }
        .photo img{
            width:100%;
            height:100%;
        }
        .cha{
            position: absolute;
            top: -0.475rem;
            right: -0.475rem;
            width: 1rem;
            height: 1rem;
        }
        .top{
            line-height:0.75rem;
        }
        .title{
            color:#FB840E;
            font-size:15px;
            background-color:#FFF3E7;
            line-height:1.05rem;
            padding-left:0.75rem;
            padding-right:0.75rem;
            padding-top:0.575rem;
            padding-bottom:0.675rem;
        }
        input[type="text"]{
            height: 2.5rem;
            line-height:auto;
            background-color: #fff;
            color:#999999;
            font-size:14px;
        }
        input::-webkit-input-placeholder {
            color:#999999;
            font-size:14px;
        }
    </style>
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-bar-nav {
            background-color: #fff;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__cha.png') no-repeat 0.5rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding-right: 0.75rem;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
        }
    </style>
    <style>
        .content{
            width: 13.5rem;
            height: 7.35rem;
            margin: 0 auto 0;
            background-color: #fff;
            border-radius: 0.25rem;
            text-align:center;
        }
        .title1{
            font-size:16px;
            color:#333;
            height:4.9rem;
            line-height:4.9rem;
        }
        .choose{
            height: 2.45rem;
            line-height: 2.45rem;
        }
        .left{
            width:260px;
            color:#666666;
            font-size:16px;
        }
        .right{
            width:260px;
            color:#E73C5C;
            font-size:16px;
        }
        .middle_line{
            color:#f5f5f5;
        }
        .hidden {
            display: none;
        }
        #ta{ color: black;}
        .mengban {
            position: fixed;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 666;
            background-color: rgba(0, 0, 0, 0.01);
            display:none;
        }
    </style>
</head>

<body>
<form id="answer">
<header class="aui-bar aui-bar-nav underLine" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active"onclick="aaa()"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
    <div class="aui-title"></div>
    <a class="aui-pull-right">
        <span class="aui-iconfont" tapmode="active" onclick="Answer()">发布</span>
    </a>
</header>

<div class="zhuti">
    <div>
        <textarea placeholder="分享你的观点和经验..." name="content"  class="advice" id="ta" maxlength="200"></textarea>
        <div class="shuzi">0/200</div>

    </div>
    <div class="photoAll" id="photoAll">
        <div class="photo"  id="ddd">

            <img  src="__IMG__add.png" onclick="cards()"/>
            <!--<div class="cha"><img  src="__IMG__cha@3x.png" /></div>-->
        </div>
    </div>
</div>
    <input type="hidden" name="id" value="{$id}">
</form>
<div class="flex-wrap flex-vertical aaaa hidden" style="position:fixed;top:0;bottom:0;left:0;right:0;z-index:10000;background:rgba(0,0,0,0.3)">
    <div class="flex-con" onclick="fnclose()" tapmode></div>
    <div class="content">
        <div class="title1">确认取消发布？</div>
        <div class="topLine choose flex-wrap">
            <div class="left" onclick="fnclose()" tapmode>取消</div>
            <div class="middle_line flex-con">|</div>
            <div class="right" onclick="qxbom()" >确定</div>
        </div>
    </div>
    <div class="flex-con" onclick="fnclose()" tapmode></div>
</div>
<div class="mengban"></div>

</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__aui-actionsheet.js"></script>
<script type="text/javascript" src="__JS__doT.min.js"></script>
<script type="text/javascript" src="__JS__aui-lazyload.js"></script>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(function(){
//      time1 = setInterval(pushHistory,1000);
        pushHistory();
        window.addEventListener("popstate", function(e) {
            // var ss=window.history;
            // alert(JSON.stringify(ss));
            aaa();
        }, false);
        function pushHistory() {
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        }
    });

    function aaa() {
        $(".aaaa").removeClass('hidden');
    }
    function qxbom() {

        // var sss=window.history.state;
        // alert(JSON.stringify(sss));
            var id = $('input[name="id"]').val();
            location.href='{:url("information/detail")}?id='+id;
    }
    function fnclose() {
        $(".aaaa").addClass('hidden');

    }

    $('#ta').on('input', function () {
        $('.shuzi').text($('#ta').val().length + '/200');
    });

    wx.config({$json});
    wx.ready(function () {
        wx.error(function(res){
            alert("接口调取失败")
        });
        wx.checkJsApi({
            jsApiList: [
                'chooseImage',
                'uploadImage',
                'downloadImage',
                'getLocalImgData',
            ],
            success: function (res) {
                if (res.checkResult.getLocation == false) {
                    alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                    return;
                }
            },
            error:function (res) {
                alert('res-error')
            }
        });
    })
    //上传证件
    var cards = function(){
        var o = 3 - $('#photoAll').find('.f').length;
        wx.chooseImage({
            count: o,
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds;
                var i = 0, length = localIds.length;
                var f = parseInt($('#photoAll').find('.f').length) + parseInt(length);
                // $('#tit').text('上传证件照片（'+ f +'/3）')
                if(f == 3){
                    $('#ddd').hide();
                }else{
                    $('#ddd').show();
                }
                function upload() {
                    wx.uploadImage({
                        localId: localIds[i],
                        isShowProgressTips: 0,
                        success: function(res) {
                            wx.downloadImage({
                                serverId: res.serverId,
                                isShowProgressTips: 0,
                                success: function (res) {
                                    wx.getLocalImgData({
                                        localId: res.localId, // 图片的localID
                                        success: function (res) {
                                            $('#photoAll').append('<div class="photo f" style="display:inline-block;position:relative;margin-bottom:20px;"><input type="hidden" name="photo[]" value="'+res.localData+'"><img style="width:100%;height:100%;"  src="'+localIds[i]+'" /><div class="cha" onclick="shan(this)"><img  src="__IMG__cha@3x.png" /></div></div>')
                                            i++;
                                            if (i < length) {
                                                upload();
                                            }
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
                upload();
            }
        })
    }
    var shan = function(obj){
        $(obj).parent().remove();
        var z = $('#photoAll').children('.f').length;
        // $('#tit').text('上传证件照片（'+z+'/3）');
        if(z < 3){
            $('#ddd').show();
        }
    }

    var Answer =  function(){
        $(".mengban").css('display','block');

        var content = $('textarea[name="content"]').val();
        if($.trim(content).length>200){
            layer.open({
                content: '评论内容不能超过200个字'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            $(".mengban").css('display','none');

            return false;
        }
        if($.trim(content).length<1){
            layer.open({
                content: '评论内容不能为空'
                ,skin: 'msg'
                ,time: 3 //2秒后自动关闭
            });
            $(".mengban").css('display','none');

            return false;
        }
        $.ajax({
            url:"{:url('Information/addwd')}",
            type:'post',
            dataType:'json',
            data:$('#answer').serialize(),
            success:function(res){
                if(res.code==200){
                    $(".mengban").css('display','none');

                    layer.open({
                        content: '发布成功'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    var id = $('input[name="id"]').val();
                    location.href='{:url("information/detail")}?id='+id;
                }else{
                    $(".mengban").css('display','none');

                    layer.open({
                        content: '发布失败'
                        ,skin: 'msg'
                        ,time: 3 //2秒后自动关闭
                    });
                    window.location.reload();
                }
            }
        })
    }
</script>

</html>
